<template>
    <div style='position: relative'>
        <div
            style='text-align: center; width: 100%; max-width: 1500px; position: absolute; left: 50%; top: 0; transform: translate(-50%,0);'>
            <el-row :gutter='20'>
                <el-col :span='16'>
                    <el-row :gutter='20' class='mgb20'>
                        <el-card shadow='hover'>
                            <!--                            标题-->
                            <h1>{{ name }}</h1>
                        </el-card>
                    </el-row>
                    <el-card shadow='hover' style='text-align: left' class='mgb20'>
                        <!--                        详情，用内联html加载-->

                        <div style="white-space: pre-wrap; text-align: center; line-height: 1.5em;" class='mgb20'>
                            {{ "\n" + detail }}
                        </div>
                    </el-card>
<!--                    <el-card v-if='this.role === "supervisor"' shadow='hover' class='mgb20'>-->
<!--                        <div class='clearfix'>-->
<!--                            <h2>评测数据修改</h2>-->
<!--                        </div>-->
<!--                        <in-upload :id='this.probID' @upload='setIOUpload'></in-upload>-->
<!--&lt;!&ndash;                        <out-upload :id='this.probID' @upload='setIOUpload'></out-upload>&ndash;&gt;-->
<!--                    </el-card>-->
<!--                    <el-card shadow='hover' class='mgb20'>-->
<!--                        <div class='clearfix'>-->
<!--                            <h2>代码编辑</h2>-->
<!--                        </div>-->
<!--                        <el-select filterable @select='handleSelectionChange' placeholder='请选择类型' v-model='suffix' class='handle-select mr10' style='width: 350px'>-->
<!--                            <el-option key='c' label='gcc' value='gcc'></el-option>-->
<!--                            <el-option key='cpp' label='g++' value='g++'></el-option>-->
<!--                            <el-option key='java' label='java' value='java'></el-option>-->
<!--                            <el-option key='rb' label='ruby' value='ruby'></el-option>-->
<!--                            <el-option key='pl' label='perl' value='perl'></el-option>-->
<!--                            <el-option key='pas' label='pascal' value='pascal'></el-option>-->
<!--                            <el-option key='go' label='go' value='go'></el-option>-->
<!--                            <el-option key='lua' label='lua' value='lua'></el-option>-->
<!--                            <el-option key='py' label='python' value='python3'></el-option>-->
<!--                            <el-option key='haskell' label='haskell' value='haskell'></el-option>-->
<!--                        </el-select>-->
<!--                        <code-edit :probID='probID' @input='setCode'></code-edit>-->
<!--                        <router-link to='/status' style='color: white'>-->
<!--                            <el-button type='primary' round style='width: 100px; padding: 0'>-->
<!--                                <div style='font-family: "黑体"; font-size: 20px' @click='handleTextSubmit'>-->
<!--                                    提交-->
<!--                                </div>-->
<!--                            </el-button>-->
<!--                        </router-link>-->
<!--                    </el-card>-->
                </el-col>
                <el-col :span='8'>
                    <el-card shadow='hover' class='mgb20' style='height:100%'>
                        <course-status
                            v-bind:id='id'
                            v-bind:name='name'
                            v-bind:time='time'
                            v-bind:credit='credit'
                            v-bind:type='type'
                            v-bind:average='average'
                            v-bind:count='count'
                        ></course-status>
                    </el-card>
<!--                    <el-card shadow='hover' class='mgb20' style='height:100%'>-->
<!--                        <template #header>-->
<!--                            <div class='clearfix'>-->
<!--                                <span>历年选课数据</span>-->
<!--                            </div>-->
<!--                        </template>-->
<!--                        <div v-for='(item, index) in progressList' class='item-view' :data=progressList>-->
<!--                            {{ item.name }}-->
<!--                            <el-progress-->
<!--                                         :percentage='setItemProgress(item)'-->
<!--                                         v-if='!isNaN(parseInt((item.completeNum/item.planNum)*100))'-->
<!--                                         :color='setItemStatus(item)'-->
<!--                                         :class='showProgressColor((item.completeNum/item.planNum)*100)'>-->
<!--                            </el-progress>-->
<!--                        </div>-->
<!--                    </el-card>-->
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
// 其他元素使用 github 的样式
import 'github-markdown-css';
// 代码高亮
import 'highlight.js/styles/github.css';
//提交信息
// import SubmitData from '@/components/common/SubmitData';
//作者信息
import CourseStatus from '@/components/common/CourseStatus';
//历史提交
import SubmitHistory from '@/components/common/SubmitHistory';
//代码编辑
import CodeEdit from '@/components/common/CodeEditor';

//文件上传
import FileUpload from '@/components/common/FileUpload';

import InUpload from '@/components/common/JudgeUpload';

export default {
    name: 'problem',
    components: {
        FileUpload,
        CourseStatus,
        SubmitData,
        SubmitHistory,
        CodeEdit,
        InUpload
    },
    data() {
        return {
            url: 'http://localhost:8443/problems/' + this.$route.query.id + '/problem.html',
            id: this.$route.query.id,
            name: '',
            time: '',
            credit: '',
            type: '',
            average: '',
            count: '',
            detail: '该课程暂无简简介。',
            progressList: [
                {
                    name: 'Accepted',
                    planNum: 150,
                    completeNum: 0
                },
                {
                    name: 'Wrong Answer',
                    planNum: 150,
                    completeNum: 0
                }
            ]
        };
    },
    mounted: function() {
        this.load_status()
    },
    methods: {
        load_status() {
            let _this = this
            this.$axios.get('/course-gradeInfo/' + this.id).then(resp => {
                if (resp && resp.status === 200) {
                    console.log(resp.data)
                    _this.name = resp.data[0].name
                    _this.time = resp.data[0].time
                    _this.credit = resp.data[0].credit
                    _this.type = resp.data[0].type
                    _this.average = resp.data[0].average
                    _this.count = resp.data[0].count
                    _this.detail = resp.data[0].detail
                }
            })
        },
        // 设置进度
        setItemProgress(data) {
            if (data.completeNum > data.planNum) {
                return 100;
            } else {
                // console.log(data.completeNum + ' ' + data.planNum)
                return parseInt((data.completeNum / data.planNum * 100).toFixed(1));
            }
        },

// 自定义进度条文字
        setItemText(row) {
            var a = row.completeNum / row.planNum * 100;
            return () => {
                return row.name + ': ' + a.toFixed(2) + '%';
            };
        },

// 设置当前进度条状态，显示不同颜色
        setItemStatus(data) {
            // console.log(data.completeNum + ' ' + data.planNum)
            if (data.completeNum > data.planNum) {
                return 'red';
            } else if (data.completeNum === data.planNum) {
                return '#84b401';
            } else {
                if (data.completeNum * 4 < data.planNum) {
                    return '#01a4aa';
                } else if (data.completeNum * 2 < data.planNum) {
                    return '#01aa91';
                } else if (data.completeNum * 4 < data.planNum * 3) {
                    return '#00ad4e';
                } else {
                    return '#37b401';
                }
            }
        },
        showProgressColor: function(val) {
            if (val < 25) {
                return 'el-bg-inner-running';
            } else if (val < 50) {
                return 'el-bg-inner-error';
            } else if (val < 75) {
                return 'el-bg-inner-done';
            }
        },
        setUpload(data) {
            this.upload = 1
            // console.log(data)
            switch (data) {
                case "c": this.lang="gcc"
                    break
                case "cpp": this.lang="g++"
                    break
                case "java": this.lang="java"
                    break
                case "rb": this.lang="ruby"
                    break
                case "pl": this.lang="perl"
                    break
                case "pas": this.lang="pascal"
                    break
                case "go": this.lang="go"
                    break
                case "lua": this.lang="lua"
                    break
                case "py": this.lang="python"
                    break
                case "hs": this.lang="haskhell"
                    break
            }
        },
        setRemove(data) {
            this.upload = 0
        },
        setIOUpload() {
            this.$message.success("上传成功");
        },
        setCode(data) {
            this.code = data
        },
        fileFilled() {
            return !this.upload
        },
        handleSubmit() {
            if(!this.upload ||
            !this.lang) {
                return ;
            }
            let that = this
            this.$axios.post("/submit/file", {
                probID: that.probID,
                username: that.username,
                language: that.lang,
            })
        },
        handleTextSubmit() {
            if(!this.code ||
                !this.suffix) {
                return ;
            }
            let that = this
            let suffix='c'
            console.log(this.suffix)

            switch (this.suffix) {
                case "gcc": suffix="c"
                    break
                case "g++": suffix="cpp"
                    break
                case "java": suffix="java"
                    break
                case "ruby": suffix="rb"
                    break
                case "perl": suffix="pl"
                    break
                case "pascal": suffix="pas"
                    break
                case "go": suffix="go"
                    break
                case "lua": suffix="lua"
                    break
                case "python3": suffix="py"
                    break
                case "haskell": suffix="hs"
                    break
            }
            // console.log(suffix)

            this.$axios.post("/submit/text/" + suffix, {
                probID: that.probID,
                username: that.username,
                language: that.suffix,
                code: that.code
            })
        },
        handleSelectionChange() {
            this.suffix = value
            this.textlang = key
        },
    }
};
</script>

<style scoped>
* {
    padding: 0.5em;
    line-height: 1.5em;
}

p {
    text-indent: 2em;
}
/deep/ .el-card__body {
    padding: 0;
}
/*/deep/ .el-upload--picture-card {*/
/*    border: 1px dashed #13C3C7;*/
/*}*/

/*/deep/ .el-upload--picture-card:hover {*/
/*    border-color: #13C3C7;*/
/*    color: #13C3C7;*/
/*}*/

/*/deep/ .el-upload--picture-card {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    font-size: 16px !important;*/
/*}*/

/*/deep/ .el-upload {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    line-height: 100px;*/
/*    font-size: 16px;*/
/*}*/

/*/deep/ .el-upload-list--picture-card .el-upload-list__item {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    line-height: 100px;*/
/*    font-size: 16px;*/
/*}*/

/*/deep/ .el-upload-list--picture-card .el-upload-list__item-actions:hover {*/
/*    opacity: 1;*/
/*    font-size: 16px;*/
/*}*/

/*/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*    line-height: 100px;*/
/*    font-size: 16px;*/
/*}*/

/*/deep/ .avatar {*/
/*    width: 100px;*/
/*    height: 100px;*/
/*}*/
</style>
